<template>
<div>
        <el-table
            :data="this.personList"
            border
            style="width: 100%"
            fit>
            <el-table-column
                fixed
                prop="id"
                label="序号"
                width="200">
            </el-table-column>
            <el-table-column
                prop="pname"
                label="姓名"
                width="200">
            </el-table-column>
            <el-table-column
                prop="picture"
                label="照片"
                width="200">
                <template slot-scope="scope">
                    　　　　<img :src="scope.row.picture" style="height: 130px;width: 150px"/>
                    　　</template>
            </el-table-column>
            <el-table-column
                prop="detail"
                label="简介"
                width="200">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="deletePerson(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    <el-button type="primary" @click="personVisible=true" style="margin-top: 10px;">添加老师</el-button>
    <el-dialog
        title="添加老师"
        :visible.sync="personVisible"
        width="30%">
        老师头像：
        <el-upload
            action="http://121.196.151.13:8088/upload/picture"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-success="personSuccess">
            <i class="el-icon-plus"></i>
        </el-upload>
        <div class="list-item" style="margin-top: 5px;">教授姓名：<el-input v-model="teacher.pname" placeholder="请输入老师姓名" style="width: 100%"></el-input></div>
        <div class="list-item" style="margin-top: 5px;">教授头衔：<el-input type="textarea" v-model="teacher.detail" placeholder="请输入老师简介" style="width: 100%"></el-input></div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="personVisible = false">取 消</el-button>
    <el-button type="primary" @click="addPerson">确 定</el-button>
  </span>
    </el-dialog>
</div>


</template>

<script>
export default {

    data(){
        return {
            personVisible: false,
            personList:[],
            teacher: {
                pname:'',
                picture:'',
                detail: '',
                ptype:1
            }
        }
    },
    mounted(){
        this.getPersonListFn();

    },
    methods:{
        toDetail(){
           this.$router.push("/teacherDetail")
        },
        getPersonListFn(){
            var params={
                type:1
            }
            this.centralControl.axios.centralControl(
                'getPersonList',
                res => {
                    this.personList=res;
                },
                params
            );

        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        personSuccess(res){
            this.teacher.picture = res.data[0];
            console.log(this.teacher.picture+"11112343")
        },
        handleSuccess(res){
            this.teacher.picture = res.data[0];
            console.log(this.teacher.picture+"11112343")
        },
        addPerson(){
            this.centralControl.axios.centralControl(
                'addPerson',
                res => {
                    this.$message({
                        message: '添加老师成功',
                        type: 'success'
                    });
                    this.getPersonListFn();
                    this.personVisible=false;
                },
                this.teacher
            );
        },
        deletePerson(row){
            const id = row.id
            var params = {
                id
            }
            this.centralControl.axios.centralControl(
                'deletePerson',
                res => {
                    this.getPersonListFn();
                },
                params
            );
        }
    }
}
</script>

<style lang="less" scoped>
ul.pic-list {
    padding: 20px 0 10px;
}
ul.pic-list li {
    float: left;
    margin: 10px 35px 5px 0;
}
ul.pic-list li  {
    color: #666;
}
img {
    width: 150px;
    height: 200px;
}
ul.pic-list li p {
    padding: 15px 0;
    color: #000;
    text-align: center;
}
</style>
